<template>
  <div class="introduct-page white-bg-page">
    <div @click="onClose" class="wnd-close">
      <svg-icon iconClass="close2" />
    </div>

    <div class="introduct-header">
      <i class="logo-i"></i>
      <span>{{$t('guide.xzdesk')}}{{ pageTitle }}</span>
      <span class="step-n">{{ currStep + 1 }}</span>
      <span class="step-a">/{{ stepList.length }}</span>
    </div>

    <div v-for="(it,i) in stepList"
      :key="i">
      <component
        v-if="initStep[i]"
        v-model="isCanNext"
        v-show="currStep === i"
        :is="it.type"
        :isNewInstall="isNewInstall"
        :data="stepList[currStep].data" />
    </div>

    <div class="footer">
      <el-button type="text"
        size="medium"
        v-if="currStep > 0"
        @click="setCurrStep(-1)">{{ $t('guide.back') }}</el-button>
      <el-button type="primary"
        size="medium"
        v-if="currStep < (stepList.length - 1)"
        @click="setCurrStep(1)">{{ $t('guide.next') }}</el-button>
      <el-button type="primary"
        size="medium"
        v-else
        @click="onComplete">{{ $t('guide.complete') }}</el-button>
    </div>

  </div>
</template>
<script>
import contentItemSkin from './components/content-item-skin.vue'
import contentItemRecommend from './components/content-item-recommend.vue'
import contentItemImg from './components/content-item-img.vue'
import contentItemZl from './components/content-item-zl.vue'
import getCurrGuidData from './guide-data'
import { mapGetters } from 'vuex'
import i18n from '@/lang'
export default {
  name: 'IntroductPage',
  components: {
    contentItemSkin,
    contentItemRecommend,
    contentItemImg,
    contentItemZl
  },
  data () {
    return {
      currStep: 0,
      initStep: {},
      isCanNext: true
    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    isNewInstall () {
      return this.$route.query.isNewInstall === '1'
    },
    pageTitle () {
      return this.isNewInstall ? this.$t('guide.novice') : this.$t('guide.func')
    },
    stepList () {
      return this.appInfo.version ? getCurrGuidData(this.isNewInstall, this.appInfo.version, this.appInfo.appID) : []
    },
    statIds () {
      // [0显示,1关闭,2下一步,3上一步,4停留时长事件id,5停留时长场景id]
      return this.isNewInstall ? {
        11: [2547, 2548, 2558, undefined, 10126, 304],
        12: [undefined, 2561, 2559, 2560, 10127, 305],
        13: [undefined, 2569, 2567, 2568, 10128, 306],
        14: [undefined, undefined, 2573, 2574, 10129, 307]
      } : {
        11: [2607, 2608, 2618, undefined, 10130, 308],
        12: [undefined, 2621, 2619, 2620, 10131, 309],
        13: [undefined, 2629, 2627, 2628, 10132, 310],
        14: [undefined, undefined, 2633, 2634, 10133, 311]
      }
    },
    currStepStatIds () {
      const info = this.stepList[this.currStep]
      return (info && this.statIds[info.id]) || []
    }
  },
  mounted () {
    this.stopTimeInfo = null
    this.setCurrStep(0)
  },
  beforeDestroy () {
  },
  methods: {
    setCurrStep (n) {
      if (n) {
        if (n > 0 && !this.isCanNext) {
          return this.$PsMessage({ message: i18n.t('code.setting') })
        }
        const statId = this.currStepStatIds[n > 0 ? 2 : 3]
        statId && this.$xz('xz_substat_action', statId)

        this.currStep += n
      }

      if (!this.initStep[this.currStep]) {
        this.$set(this.initStep, this.currStep + '', true)
        this.currStepStatIds[0] && this.$xz('xz_substat_action', this.currStepStatIds[0])
      }

      const info = this.stepList[this.currStep]
      info && this.$xz('xz_page_jump_notify', info.id)

      this.StopInfoReport()
      this.stopTimeInfo = {
        e: this.currStepStatIds[4],
        c: this.currStepStatIds[5],
        t: new Date().getTime()
      }
    },
    onComplete () {
      this.StopInfoReport()
      this.currStepStatIds[2] && this.$xz('xz_substat_action', this.currStepStatIds[2])
      this.$xz('xz_guider_finished')
    },
    onClose () {
      // if (this.currStep < (this.stepList.length - 1)) {
      this.currStepStatIds[1] && this.$xz('xz_substat_action', this.currStepStatIds[1])
      this.$xz('xz_call_tips_wnd', 1)
      // } else {
      //   this.onComplete()
      // }
    },
    StopInfoReport () {
      if (!this.stopTimeInfo) return
      const { e, c } = this.stopTimeInfo
      let { t } = this.stopTimeInfo
      t = Math.round((new Date().getTime() - t) / 1000)
      this.$xzReportInfo(c, e, t)
      this.stopTimeInfo = null
    }
  }
}
</script>
<style lang="scss" scoped>
.introduct-page {
  padding: 20px 30px 0 30px;
  height: 100vh;
  position: relative;
  /deep/ {
    .introduct-content {
      padding: 18px 20px;
      background-color: rgba(0, 0, 0, 0.03);
      border: 1px solid rgba(112, 112, 112, 0.03);
      border-radius: 6px;
      + .introduct-content {
        margin-top: 10px;
      }
    }
    .content-tittle {
      position: relative;
      padding-left: 10px;
      font-size: 14px;
      font-weight: bold;
      margin-bottom: 11px;
      &::before {
        content: " ";
        position: absolute;
        top: 7px;
        left: 0;
        display: inline-block;
        width: 5px;
        height: 5px;
        background: rgba($color: #333, $alpha: 0.5);
        border-radius: 50%;
      }
    }
    .content-tittle-right {
      position: absolute;
      top: 2px;
      right: 0;
      color: #00BBD7;
      font-size: 12px;
      font-weight: normal;
    }
    .el-checkbox {
      .el-checkbox__label {
        color: #999999;
      }
      .el-checkbox__input {
        vertical-align: -0.25em;
      }
      .el-checkbox__inner {
        border-radius: 2px;
        background: #fff;
      }
      &:hover {
        .el-checkbox__inner {
          border-color: #00BBD7;
        }
      }
      &.is-checked {
        .el-checkbox__inner {
          border-color: #00BBD7;
          background: #00BBD7;
          color: #fff;
          &::after {
            border-color: #fff;
          }
        }
      }
    }
    .img-checkbox {
      padding: 3px;
      border: 1px solid transparent;
      border-radius: 8px;
      position: relative;
      cursor: pointer;
      &:hover,
      &.active {
        border-color: #00BBD7;
      }
      &.active {
        .el-icon-check {
          display: block;
        }
      }
      img {
        vertical-align: middle;
      }
      .ps-el-image {
        height: 140px;
        width: 100%;
        border-radius: 4px;
        overflow: hidden;
      }
      .el-icon-check {
        position: absolute;
        right: -5px;
        top: -5px;
        width: 18px;
        height: 18px;
        line-height: 18px;
        text-align: center;
        background: #00BBD7;
        border-radius: 3px;
        border: 1px solid #6cdaf5;
        color: #fff;
        display: none;
        z-index: 2001;
      }
    }
    .introduct-img {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 380px;
      margin-bottom: 20px;
      // img {
      //   max-width: 100%;
      //   max-height: 100%;
      // }
      .ps-el-image{
        max-width: 100%;
        max-height: 100%;
      }
      .ps-el-image{
        .el-image__placeholder{
          font-size: 20px;
        }
      }
    }
    .introduct-title {
      text-align: center;
      font-size: 16px;
      font-weight: bold;
      color: #333333;
      margin: 4px 0 15px;
      font-family: Microsoft YaHei-Bold, Microsoft YaHei;
      position: relative;
      &-right {
        position: absolute;
        right: 0;
        bottom: 0;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }
}
.introduct-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 16px;
  font-size: 16px;
  .logo-i {
    display: inline-block;
    margin-right: 5px;
    width: 35px;
    height: 24px;
    background: url("../../assets/logo-i.png") 0 0 no-repeat;
    background-size: 100%;
  }
  .step-n {
    margin-left: 10px;
    font-size: 18px;
    color: #00BBD7;
  }
  .step-a {
    font-size: 18px;
    color: #999;
  }
}
.footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 22px;
  text-align: center;
  .el-button {
    // &.is-disabled{
    //   background-color: #00BBD7;
    //   border-color: #00BBD7;
    // }
    + .el-button {
      margin-left: 20px;
    }
  }
  .el-button--primary {
    width: 158px;
  }
  .el-button--text {
    color: #333;
    &:hover {
      color: #00BBD7;
    }
  }
}
</style>
